<template>
    <div>
        <div align="center">重庆国际集装箱码头有限责任公司</div>
        <h3 align="center" style="margin-top: 10px;">装船清单</h3>
        <el-row style="margin-top: 20px;">
            <el-col :span="8"><div class="grid-content bg-purple">船代:{{accountUnit}}</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light">结算月度:{{accountMonth}}</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">发生日期:{{createTime}}</div></el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
            <el-col :span="8"><div class="grid-content bg-purple">船名:{{shipName}}</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple-light">航次:{{voyage}}</div></el-col>
            <el-col :span="8"><div class="grid-content bg-purple">封航日期:{{closeTime}}</div></el-col>
        </el-row>
        <table border="1" cellspacing="0" style="width: 800px;margin-top: 20px;">
            <tr style="text-align: center">
                <td>箱号</td>
                <td>箱型</td>
                <td>尺寸</td>
                <td>内外贸</td>
                <td>空重</td>
                <td>中转</td>
                <td v-if="isZC">装箱方式</td>
                <td>铅封号</td>
                <td>提单号</td>
                <td v-if="isZC">装船位置</td>
                <td>货名</td>
                <td>件数</td>
            </tr>
            <tr v-for="item in list" style="text-align: center">
                <td>{{item.containerId}}</td>
                <td>{{item.containerType}}</td>
                <td>{{item.containerSize}}</td>
                <td>{{item.tradeType}}</td>
                <td>{{item.ef}}</td>
                <td>{{item.change}}</td>
                <td v-if="isZC">{{(item.enchaseWay == "" || item.enchaseWay == null) ? item.enchaseWay : item.enchaseWay == 'GZ' ? '港装' : '厂装'}}</td>
                <td>{{item.sealNo}}</td>
                <td>{{item.billNumber}}</td>
                <td v-if="isZC">{{item.loadPosition}}</td>
                <td>{{item.cargoName}}</td>
                <td>{{item.cargoCount}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    import { getBalanceShipList } from "@/api/balance/balance";
    import { getLocalTime } from "@/utils/dateFormat";
    export default {
        name: "shipDetail",
        data() {
            return {
                list:[],
                accountUnit:"",
                accountMonth:"",
                createTime:"",
                shipName:"",
                voyage:"",
                closeTime:"",
                actionBoat:"",
                isZC : true
            }
        },
        created() {
            const id=this.$route.params.id
            const planNo=this.$route.params.planNo
            this.loadData(id,planNo)
        },
        methods: {
            loadData(id,planNo){
                getBalanceShipList(id, planNo).then(res => {
                    this.list = res.data.detailData
                    this.accountUnit = res.data.accountUnit
                    this.accountMonth = res.data.accountMonth
                    this.createTime = res.data.createTime
                    if (res.data.planType === 'ZC'){
                        this.actionBoat = "装船"
                    } else if (res.data.planType === 'XC') {
                        this.actionBoat = "卸船"
                        this.isZC = false
                    }
                    this.shipName = res.data.shipName
                    this.voyage = res.data.voyage
                    this.closeTime = getLocalTime(res.data.closeTime, 'YYYY-MM-DD')
                    this.$nextTick(() => {
                        window.print()
                        window.close();
                    })
                })
            }
        }
    }
</script>
